<template>
  <div class="all">
    <div class="header menu">
      <ul>
        <li class="logo">
          <p>雪家 OA 系统</p>
        </li>
        <li>
          <router-link to="/home/main">主页</router-link>
        </li>

        <li class="header-right" style="float:right;margin-right:20px">
			<img style="width: 50px;height: 60px;margin-right: 20px;" :src='imgurl'/>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{$store.getters.getUser.user.name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/home/admin">用户信息</router-link>
              </el-dropdown-item>
			  <el-dropdown-item>
			    <router-link to="/home/changePassword">修改密码</router-link>
			  </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/login">退出登录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
    <div class="main">
      <el-container style="width: 100%;height: 100%;">
        <el-aside style="width: 20%;height: 100%;" class="main-aside">
          <el-menu>
            <el-submenu index="1" >
              <template slot="title">
                <i class="el-icon-menu">用戶</i>
              </template>
              <router-link to="/home/userlist">用户列表</router-link>
              <router-link to="/home/usermanage" v-if="role == '1'">用户管理</router-link>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-message">流程</i>
              </template>
              <router-link to="/home/workflowlist">流程列表</router-link>
              <router-link to="/home/workflowmanage">流程管理</router-link>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-message">信息</i>
              </template>
              <router-link to="/home/notice" v-if="role == '1' || role == '2'">公告</router-link>
			  <router-link to="/home/task">任务协作</router-link>
			  <router-link to="/home/summary">日报</router-link>
            </el-submenu>
			
          </el-menu>
        </el-aside>
        <el-main style="width: 80%;height: 100%;">
          <router-view />
        </el-main>
      </el-container>
    </div>
  </div>
</template>



<script>
// @ is an alias to /src

export default {
	data(){
		return{
			imgurl: '',
			role:'',
		}
	},
	mounted() {
	  this.$nextTick(function () {
	     this.getUserPic1()
		 this.setRole()
	  })
	},
	methods: {
		getUserPic1:function(){
			var userId =  this.$store.getters.getUser.user.id
			var url = 'http://localhost:8080/message/user/getUserPic?userId='+userId
			this.axios.get(url).then(response => {
				var str1 = response.data
				// console.log(str1);
				this.imgurl = require('../../public/img/'+str1);
				// console.log(this.imgurl);
		    });
		
		},
		setRole:function(){
			this.role = this.$store.getters.getUser.user.role
		}
	}
};
</script>

<style scoped>
.all {
  height: calc(100vh - 80px);
  width: 100%;
  background-color: rgba(125, 235, 250, 0.2);
}
.header {
  background-color: #393d49;
  height: 80px;
  width: 100%;
}
.logo {
  color: #dde4ec;
  text-align: center;
  height: 50px;
  width: 200px;
}
.header-right {
  text-align: center;
  margin: 12px 0;
}
.el-dropdown-link {
  cursor: pointer;
  color: #dde4ec;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.main {
  height: calc(100vh - 80px);
}

.main-aside {
  background-color: #2f4056;
}

aside.main-aside ul li {
  color: #dde4ec;
  background-color: #2f4056;
}
aside.main-aside a {
  text-align: center;
  color: #dde4ec;
  background-color: #393d49;
}
.el-icon-menu {
  color: #dde4ec;
}
.el-icon-message {
  color: #dde4ec;
}
aside.main-aside ul li a,
aside.main-aside ul li a:visited {
  color: #dde4ec; /* 文字颜色 */
  display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
  padding: 14px 20px; /* 内部填充的距离 */
  text-decoration: none; /* 不显示超链接下划线 */
  white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
}
aside.main-aside ul li a:hover {
  background-color: #606266; /* 背景色 */
  color: #dde4ec; /* 文字颜色 */
  text-decoration: none; /* 不显示超链接下划线 */
}
aside.main-aside ul li a:active {
  background-color: #465c71; /* 背景色 */
  color: #cfdbe6; /* 文字颜色 */
  text-decoration: none; /* 不显示超链接下划线 */
}
li.el-menu-item-group__title {
  display: none;
}

div.menu ul {
  list-style: none; /* 去掉ul前面的符号 */
  margin: 0px; /* 与外界元素的距离为0 */
  padding: 0px; /* 与内部元素的距离为0 */
  width: auto; /* 宽度根据元素内容调整 */
}
div.menu ul li {
  float: left; /* 向左漂移，将竖排变为横排 */
}
div.menu ul li a,
div.menu ul li a:visited {
  color: #dde4ec; /* 文字颜色 */
  display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
  padding: 14px 20px; /* 内部填充的距离 */
  text-decoration: none; /* 不显示超链接下划线 */
  white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
}
div.menu ul li a:hover {
  background-color: #606266; /* 背景色 */
  color: #dde4ec; /* 文字颜色 */
  text-decoration: none; /* 不显示超链接下划线 */
}
div.menu ul li a:active {
  background-color: #465c71; /* 背景色 */
  color: #cfdbe6; /* 文字颜色 */
  text-decoration: none; /* 不显示超链接下划线 */
}
</style>
